<template>
	<view class="categories_body" :style="{height:gaodu+'px'}">
		<view class="categories_left">
			<!-- <text class="white_red">{{classType}}</text> -->
			<text  v-for="(v,i) in  table"    :class=" xunzgobf===i ? 'white_red' : '' "  @click="xuanzhog(i,v.fzzl)" >{{v.fzzl}}</text>
			
		</view>
		<view class="categories_right">
			<view class="right_nav">
				<text>{{fzzl2}}</text>
				<uni-icons @click="jump"  type="forward" size="20"></uni-icons>
			</view>
			<view class="right_body">
				<!-- <image src="" mode=""></image> -->
				<view class="right_content"    v-for="(v,i) in  goodtable"     >
		
					<image class="kuang" :src=" imgUrl+v.img" mode=""></image>
					<view class=".categories_hidden">{{v.fzjj}}</view>
				</view>
			
				
			</view>
		
		</view>
		
	</view>
</template>

<script>
	import http from '../../until/http';
	import {useStore} from 'vuex';
	import {computed,reactive,toRefs,onMounted} from 'vue'
	export default {
	
		  setup(){
			  const store=useStore();
		  	let data=reactive({
		  		
				imgUrl:'http://localhost:8888/getImg?sort=',
				table:[],
				xunzgobf:0,
				goodtable:[],
				fzzl2:'',
				gaodu:'',
				gotoData:()=>{
					// http({
					// 	url:'/goods/getallgoods'
					// }).then((res)=>{
					// 	console.log(res.data.data)
					// })					
				},
				xuanzhog(w,fzzl){
					data.xunzgobf= w;
					data.fzzl2=fzzl;
					http({
						url:'/goods/allgoods',
						data:{fzzl},
						
					}).then((res)=>{
						data.goodtable=res.data.data  
						// console.log(data.fzzl2)						
						store.commit('yao/getValue',data.fzzl2)
					})	
				}
				,
				
				jump(){
				console.log(data.fzzl2)
				uni.navigateTo({
					url: '../Categories/Categories',
				})
				},
				
		  	});
			onMounted(()=>{
				data.gaodu=uni.getSystemInfoSync().screenHeight;
				console.log(data.gaodu)
				// document.querySelector('.categories_body').style.height = document.documentElement.clientHeight + 'px';
					http({
						url:'/goods/getfzzl',
					
					}).then((res)=>{
						data.table=res.data.data 
						data.fzzl2=res.data.data[0].fzzl
						
						// console.log(res.data.data[0].fzzl)
						store.commit('yao/getValue',res.data.data[0].fzzl)
					
						http({
							url:'/goods/allgoods',
							data:res.data.data[0],
							
						}).then((res2)=>{
							data.goodtable=res2.data.data  
						})	
					});
				
			})
		  	return {...toRefs(data)}
		  },
	
		
		}
</script>

<style scoped>
	
.categories_body{
	font-size: 32rpx;
	width:750rpx;
	display: flex;
}
.categories_left{
	width:184rpx;
	/* height: 1000rpx; */
	display: flex;
	flex-direction: column;
	text-align: center;
	background-color: rgb(242,242,242);
}
.categories_hidden{
	width: 150rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.white_red{
	color: red;
	background-color: white;
}
.categories_left text{
	padding: 24rpx;
}
.categories_right{
	flex:1;
}
.right_nav{
	display: flex;
	padding:24rpx 24rpx 24rpx 36rpx;
	justify-content: space-between;
}
	
.right_body{
	margin-bottom: 36rpx;
	display: flex;
	flex: 3;
	justify-content:flex-start;
	flex-wrap: wrap;
	align-content: flex-start;
	/* text-align: center; */
}
	
.right_content{
	/* width: 280rpx; */
	flex: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	flex-wrap: wrap;
	align-content: space-around;
	margin-top: 10rpx;
}
.right_content view{
	text-align: center;
}
.right_body .kuang{
	width: 116rpx;
	height: 116rpx;
	border:1px solid rgb(242,242,242);
}
</style>
